JavaScript模式匹配解构赋值：增强的变量提取

            const user = {
  id: 'user_123',
  firstName: 'Alice',
  lastName: 'Smith',
  email: 'alice.smith@example.com',
  preferences: {
    theme: 'dark',
    notifications: true
  }
};

// Pre-ES6 variable extraction
const userId = user.id;
const userFirstName = user.firstName;
const userEmail = user.email;

const coordinates = [10.23, 5.78, 90.0];

// Pre-ES6 array element extraction
const x = coordinates[0];
const y = coordinates[1];
const z = coordinates[2];

            

              
                Copy
              
            
          

            const product = {
  id: 'prod_456',
  name: 'Wireless Headphones',
  price: 99.99,
  currency: 'USD'
};

// Basic object destructuring
const { id, name, price } = product;

console.log(id);    // 'prod_456'
console.log(name);  // 'Wireless Headphones'
console.log(price); // 99.99

            

              
                Copy
              
            
          

            const order = {
  orderId: 'ORD_789',
  totalAmount: 150.75,
  status: 'pending'
};

// Destructuring with renaming
const { orderId: transactionId, totalAmount: amountDue } = order;

console.log(transactionId); // 'ORD_789'
console.log(amountDue);     // 150.75
// console.log(orderId);    // ReferenceError: orderId is not defined

            

              
                Copy
              
            
          

            const config = {
  host: 'localhost',
  port: 8080
  // apiKey is missing
};

// Destructuring with default values
const { host, port, apiKey = 'default_api_key' } = config;

console.log(host);   // 'localhost'
console.log(port);   // 8080
console.log(apiKey); // 'default_api_key' (because apiKey was missing in config)

const userProfile = {
  name: 'Jane Doe'
  // age is missing
};

const { name, age = 30 } = userProfile;
console.log(name); // 'Jane Doe'
console.log(age);  // 30

            

              
                Copy
              
            
          

            const settings = {
  theme: null
};

const { theme = 'light' } = settings;
console.log(theme); // null (default not applied because theme exists, even if null)

            

              
                Copy
              
            
          

            const response = {
  status: 200,
  data: {
    user: {
      name: 'Maria',
      email: 'maria@example.com',
      address: {
        city: 'Berlin',
        country: 'Germany'
      }
    },
    settings: {
      notifications: true,
      language: 'en'
    }
  },
  timestamp: Date.now()
};

// Nested object destructuring
const {
  data: {
    user: {
      name: userName,
      address: {
        city: userCity,
        country: userCountry
      }
    },
    settings: {
      language
    }
  }
} = response;

console.log(userName);    // 'Maria'
console.log(userCity);    // 'Berlin'
console.log(userCountry); // 'Germany'
console.log(language);    // 'en'
// console.log(user);     // ReferenceError: user is not defined (user was a pattern, not a variable)

            

              
                Copy
              
            
          

            const { data: { user, settings: { notifications } } } = response;

console.log(user);          // { name: 'Maria', email: 'maria@example.com', address: {...} }
console.log(notifications); // true

            

              
                Copy
              
            
          

            const productDetails = {
  id: 'P001',
  name: 'Laptop',
  price: 1200,
  category: 'Electronics',
  weightKg: 1.5,
  dimensionsCm: '30x20x2',
  manufacturer: 'TechCorp'
};

// Extract specific properties, collect the rest
const { id, name, price, ...otherDetails } = productDetails;

console.log(id);           // 'P001'
console.log(name);         // 'Laptop'
console.log(price);        // 1200
console.log(otherDetails); // { category: 'Electronics', weightKg: 1.5, dimensionsCm: '30x20x2', manufacturer: 'TechCorp' }

            

              
                Copy
              
            
          

            const rgbColors = [255, 128, 0];

// Basic array destructuring
const [red, green, blue] = rgbColors;

console.log(red);   // 255
console.log(green); // 128
console.log(blue);  // 0

            

              
                Copy
              
            
          

            const dataPoints = [10, 20, 30, 40, 50];

// Skipping elements
const [first, , third, , fifth] = dataPoints;

console.log(first);  // 10
console.log(third);  // 30
console.log(fifth);  // 50

            

              
                Copy
              
            
          

            const dimensions = [100, 200];

// Destructuring with default values for missing elements
const [width, height, depth = 50] = dimensions;

console.log(width);  // 100
console.log(height); // 200
console.log(depth);  // 50 (because the third element was missing)

const names = ['John', undefined, 'Doe'];
const [firstName, middleName = 'N/A', lastName] = names;
console.log(firstName);  // 'John'
console.log(middleName); // 'N/A' (because the second element was explicitly undefined)
console.log(lastName);   // 'Doe'

            

              
                Copy
              
            
          

            const numbers = [1, 2, 3, 4, 5, 6];

// Extract first two elements, collect the rest
const [firstNum, secondNum, ...remainingNumbers] = numbers;

console.log(firstNum);        // 1
console.log(secondNum);       // 2
console.log(remainingNumbers); // [3, 4, 5, 6]

const [,, ...lastFour] = numbers;
console.log(lastFour);        // [3, 4, 5, 6]

            

              
                Copy
              
            
          

            let a = 10;
let b = 20;

console.log(`Before swap: a = ${a}, b = ${b}`); // Before swap: a = 10, b = 20

[a, b] = [b, a]; // Swapping values using array destructuring

console.log(`After swap: a = ${a}, b = ${b}`);  // After swap: a = 20, b = 10

            

              
                Copy
              
            
          

            const student = {
  id: 101,
  name: 'Elena',
  grades: [
    { subject: 'Math', score: 95 },
    { subject: 'Science', score: 88 },
    { subject: 'History', score: 92 }
  ],
  contact: {
    email: 'elena@university.edu',
    phone: '555-1234'
  }
};

// Mixed destructuring: extract name, first grade's subject, and contact email
const {
  name: studentName,
  grades: [{ subject: firstSubjectScore }],
  contact: { email: studentEmail }
} = student;

console.log(studentName);        // 'Elena'
console.log(firstSubjectScore);  // 'Math'
console.log(studentEmail);       // 'elena@university.edu'

            

              
                Copy
              
            
          

            // Function that expects a configuration object
function renderChart({
  data,
  type = 'bar',
  width = 800,
  height = 600,
  options: { title = 'Default Chart', legend = true } = {}
}) {
  console.log(`Rendering a ${type} chart: ${title}`);
  console.log(`Dimensions: ${width}x${height}`);
  console.log(`Data points: ${data.length}`);
  console.log(`Legend enabled: ${legend}`);
  // ... chart rendering logic
}

const chartData = [10, 20, 15, 25, 30];

renderChart({
  data: chartData,
  type: 'line',
  options: {
    title: 'Sales Trend',
    legend: false
  }
});
// Output:
// Rendering a line chart: Sales Trend
// Dimensions: 800x600
// Data points: 5
// Legend enabled: false

renderChart({ data: [1, 2, 3] });
// Output:
// Rendering a bar chart: Default Chart
// Dimensions: 800x600
// Data points: 3
// Legend enabled: true

            

              
                Copy
              
            
          

            // This will throw a TypeError: Cannot destructure property 'x' of 'null' or 'undefined'
// const { x } = null;
// const [y] = undefined;

            

              
                Copy
              
            
          

            const potentiallyNullObject = null;
const { propertyA, propertyB } = potentiallyNullObject || {};
console.log(propertyA, propertyB); // undefined undefined (no TypeError)

const potentiallyUndefinedArray = undefined;
const [element1, element2] = potentiallyUndefinedArray || [];
console.log(element1, element2);   // undefined undefined (no TypeError)

            

              
                Copy
              
            
          

            // Before destructuring
function processEvent(event) {
  const eventType = event.type;
  const payloadData = event.payload.data;
  const userId = event.payload.user.id;
  const userRegion = event.payload.user.location.region;
  // ...
}

// With destructuring
function processEvent({ type, payload: { data, user: { id: userId, location: { region: userRegion } } } }) {
  // type, data, userId, userRegion are directly available
  // ...
}

            

              
                Copy
              
            
          

            // Potentially less clear (too much in one line, especially if 'options' can be null/undefined)
const { data, type = 'bar', options: { title = 'Default Chart', legend = true } = {} } = chartConfig;

// More readable breakdown (especially with comments if needed)
const { data, type = 'bar', options } = chartConfig;
const { title = 'Default Chart', legend = true } = options || {};

            

              
                Copy